<template>
	<div class="zco-collect-short-video-response-container">
		<p>{{ getCollectShortVideoStatus }}</p>
		<p v-if="status === 'done'">短视频链接：<span style="color: #6384fe; cursor: pointer" @click="copyLink">点击复制</span></p>
		<p v-else>{{ getCollectShortVideoFailed }}</p>
	</div>
</template>
<script>
export default {
	name: 'APP',
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		status: {
			type: String,
			default: () => ''
		},
		url: {
			type: String,
			default: () => ''
		},
		reason: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getCollectShortVideoStatus() {
			return `致 <${this.toUserRole === 'agent' ? '坐席' : '访客'}${this.toUserName}>，${this.status === 'done' ? '提交成功' : '提交失败'}`;
		},
		getCollectShortVideoFailed() {
			if (this.reason === 'record-crash') {
				return '原因：拍摄异常中断';
			} else {
				return '原因：访客拒绝';
			}
		}
	},
	data() {
		return {};
	},
	methods: {
		copyLink() {
			let copyInput = document.createElement('input'); //创建input元素
			document.body.appendChild(copyInput); //向页面底部追加输入框
			copyInput.setAttribute('value', this.url); //添加属性，将url赋值给input元素的value属性
			copyInput.select(); //选择input元素
			document.execCommand('Copy'); //执行复制命令
			this.$zcoMessage({
				type: 'success',
				message: `已复制链接`,
				duration: 3
			});
			//复制之后再删除元素，否则无法成功赋值
			copyInput.remove(); //删除动态创建的节点
		}
	},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-collect-short-video-response-container p {
	margin: 0;
}
</style>
